<!--  -->
<template>
  <div class='' style="min-height:500px" v-loading='zhengqi_table_loading' v-no-data='no_data'>
    <div :class="['d_list',{'disMark-row':item.disMark==='1'},{'CITYE':item.powerSupplySmallClass==='CITYE'},{'GF':item.powerSupplySmallClass==='GF'},{'TRQ':item.powerSupplySmallClass==='TRQ'},{'CN':item.powerSupplySmallClass==='CN'}]" v-for="(item,index) in zhengqi_table" :key='index'>
      <div class='d_list_title' @click='list_show_click(item,index)'>
        <div class='d_left'>
          <div :class="{'arrow-right':item.isOpen}">
            <i class='el-icon-arrow-right'></i>
          </div>
          <div>
            销售对象：<span>{{item.name}}</span>
          </div>
          <div>
            开始执行时间：<span>{{item.startExecuteDate}}</span>
          </div>
        </div>
        <div class='d_right'>
          <div v-if="item.disMark==='1'">
            <el-button size='mini' type="primary">已废弃</el-button>
          </div>
          <div v-else>
            <el-button v-show='item.isDiscard' type="primary" size='mini' @click.stop='editor(item)'>编辑</el-button>
            <el-button v-show='item.isDiscard' type="danger" size='mini' @click.stop='abandoned(item)'>废弃</el-button>
          </div>
          <div v-if='item.isBack'>
            <el-button type="primary" size='mini'>已失效</el-button>
          </div>
        </div>
      </div>
      <el-collapse-transition>
        <div class='d_details' v-show="item.isOpen">
          <div class='t' v-show="item.powerSupplySmallClass === 'CITYE'">
            <div style="flex:0 0 90px"></div>
            <div>
              基本容量：<span>{{item.basicCapacity}}</span>
            </div>
            <div>
              申报需量：<span>{{item.ratifiedMaxDemand}}</span>
            </div>
            <div>
              基本电费容量价：<span>{{item.basicTransCapacity}}</span>
            </div>
            <div>
              基本电费需量价：<span>{{item.basicElePriceMaxCapacity}}</span>
            </div>
          </div>

          <div class='d_details_list' v-loading='item.details_loading'>
            <div v-for='(item,index) in item.details' :key='index'>
              <div>
                <b>{{item.priceName}}</b>
                <span>{{index===0?'开始执行日期':'执行日期'}}</span>
                <b>{{item.startExecuteDateStr}}</b>
              </div>

              <div class='details_jfpg' v-for='(item,index) in item.priceList' :key='index'>
                <div class='name_price'>
                  <span :class="[{'tip':item.name==='tip'},{'peak':item.name==='peak'},{'flat':item.name==='flat'},{'valley':item.name==='valley'}]">{{item.name|jfpg}}</span>
                  <b>{{item.price}}</b>
                  <i>元</i>
                </div>
                <div class='date'>
                  <div v-for='(item,index) in item.time' :key='index'>
                    <span>开始时间</span>
                    <b>{{item.start}}</b>
                    <span>结束时间：</span>
                    <b>{{item.end}}</b>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
// import './index.scss'
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'date',
    ])
  },
  watch: {
    date: function (n, o) {
      this.initList(n)
    }
  },
  name: 'zhaoxiongfei',
  data() {
    return {
      no_data: false,
      zhengqi_table_loading: true,
      zhengqi_table: []
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
      // ========== () ==========
    }
  },
  created() {
    this.initList(this.date)

  },
  methods: {
    initList(n) {
      this.zhengqi_table_loading = true
      // 获取list数据
      this.$axios
        .post(this.Eelec + "/energy/info/manage/list", {
          custId: sessionStorage.getItem("custId"),
          date: n,
          energyType: '01',
          billType: '3'
        })
        .then(res => {
          this.zhengqi_table_loading = false
          if (res.data.data.saleList !== null && res.data.data.saleList.length) {
            this.zhengqi_table = res.data.data.saleList
            this.zhengqi_table.forEach((item, index) => {
              this.no_data = false
              this.$set(this.zhengqi_table[index], "isOpen", false)
              this.$set(this.zhengqi_table[index], "num", 0)
            })
          } else {
            this.no_data = true
            this.zhengqi_table = []
          }
        }).catch((err) => {
          this.zhengqi_table = []

        })
    },
    list_show_click(item, index) {
      this.$set(this.zhengqi_table[index], "isOpen", !this.zhengqi_table[index].isOpen)
      for (let i = 0; i < this.zhengqi_table.length; i++) {
        if (i !== index) {
          this.zhengqi_table[i].isOpen = false
        }
      }
      this.$set(this.zhengqi_table[index], "num", this.zhengqi_table[index].num += 1)
      if (item.num === 1) {
        this.$set(this.zhengqi_table[index], "details_loading", true)
        this.details_caigou(item.id, index)
      }
    },
    details_caigou(id, index) {
      var fd = new FormData()
      this.$axios
        .get(this.Eelec + "/electricityPriceSale/getDetail",
          {
            params: {
              id: id,
            }
          }
        )
        .then(res => {
          this.$set(this.zhengqi_table[index], "details_loading", false)
          if (res.data.code === 200) {
            if (res.data.data.length) {
              this.$set(this.zhengqi_table[index], "details", res.data.data)
            } else {
              this.$set(this.zhengqi_table[index], "details", [])
            }
          } else {
          }
        }).catch((err) => {
        })
    }
  },
  // ========== () ==========
  // ========== () ==========
  // ========== () ==========
  // ========== () ==========
  // ========== () ==========
  // ========== () ==========
  // ========== () ==========
  // ========== () ==========
  // ========== () ==========
  // ========== () ==========
  mounted() { },
  components: {},
  filters: {
    jfpg: function (a, arg1, arg2) {
      if (a === '01' || a === 'tip') {
        return '尖'
      }
      if (a === '02' || a === 'peak') {
        return '峰'
      }
      if (a === '03' || a === 'flat') {
        return '平'
      }
      if (a === '04' || a === 'valley') {
        return '谷'
      }
    },
    gongdian_xiaolei: function (a) {
      // powerSupplySmallClass
      if (a === 'CITYE') {
        return "市电"
      } else if (a === 'GF') {
        return '分布式光伏'
      }
      else if (a === 'TRQ') {
        return '分布式天然气'
      }
      else if (a === 'CN') {
        return '储能'
      } else {
        return a
      }
    },
    gongdian_leibie: function (a) {
      if (a === 'CTDN') {
        return '传统电能'
      } else if (a === 'QJDN') {
        return '清洁电能'
      } else {
        return a
      }
    },
  }
}

</script>

<style lang='scss' scoped>
.d_list {
  position: relative;
  margin-bottom: 20px;
  .d_list_title:hover {
    background: rgba(7, 128, 237, 0.1);
  }
  .d_list_title {
    cursor: pointer;
    // border-bottom: 1px solid #e5e5e5;
    height: 60px;
    align-items: center;
    // margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .arrow-right {
      i {
        transition: 0.5s all;
        transform: rotate(90deg);
      }
    }
    .d_left {
      display: flex;
      // padding-left: 60px;

      > div {
        font-size: 16px;
        color: #666;
        // padding-right: 20px;
        // min-width: 200px;
        span {
          color: #333;
          font-weight: 800;
        }
      }
      > div:nth-child(2) {
        min-width: 200px;
      }
      > div:nth-child(3) {
        min-width: 200px;
      }
      > div:first-child {
        min-width: 30px;
      }
    }
    .d_right {
      min-width: 130px;
      display: flex;
      justify-content: center;
    }
  }
  .d_details {
    .t {
      height: 65px;
      display: flex;
      align-items: center;
      > div {
        flex: 1;
        font-size: 16px;
        color: #666;
        // padding-right: 20px;
        // min-width: 200px;
        span {
          color: #333;
          font-weight: 800;
        }
      }
    }
    .d_details_list {
      margin-top: 30px;
      padding-left: 110px;
      min-height: 200px;
      display: flex;
      .details_jfpg {
        border-top: 1px solid #e5e5e5;
        padding: 20px 0 10px 0;
        .tip {
          background: #ff5227;
          color: #ffffff;
          font-size: 16px;
          padding: 5px;
        }
        .peak {
          background: #ff9200;
          color: #ffffff;
          font-size: 16px;
          padding: 5px;
        }
        .flat {
          background: #0050e2;
          color: #ffffff;
          font-size: 16px;
          padding: 5px;
        }
        .valley {
          background: #44d428;
          color: #ffffff;
          font-size: 16px;
          padding: 5px;
        }
      }
      .details_jfpg:hover {
        background: rgba(7, 128, 237, 0.1);
      }
      > div {
        flex: 1;
        margin-right: 50px;
        font-size: 16px;
        span {
          color: #666666;
          margin-right: 10px;
        }
        b {
          margin-right: 10px;
        }
        i {
          font-style: normal;
          color: #666;
        }
        > div {
          margin-bottom: 10px;
          > div {
            margin-bottom: 10px;
            > div {
              margin-bottom: 10px;
            }
          }
        }
      }
    }
  }
}

.disMark-row {
  cursor: no-drop;

  pointer-events: none;
  opacity: 0.5;
}
.CITYE {
  // background: #FF5227;
  // background:rgba(255, 82, 29, 0.1);
  border-top: 1px solid rgba(6, 212, 40, 0.7);
  border-left: 1px solid rgba(6, 212, 40, 0.7);
}

.CITYE::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  // line-height: -90px;
  width: 0px;
  height: 0px;
  border-width: 30px;
  border-style: solid;
  border-color: rgba(6, 212, 40, 0.7) transparent transparent
    rgba(6, 212, 40, 0.7);
}

.CITYE::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 45px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  content: "市电";
  color: #ffffff;
  font-weight: 900;
  font-size: 12px;
}

.GF {
  // background: #FF9200;
  // background:rgba(255, 146, 0, 0.1);
  border-top: 1px solid rgba(255, 146, 0, 0.7);
  border-left: 1px solid rgba(255, 146, 0, 0.7);
}

.GF::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  // line-height: -90px;
  width: 0px;
  height: 0px;
  border-width: 30px;
  border-style: solid;
  border-color: rgba(255, 146, 0, 0.7) transparent transparent
    rgba(255, 146, 0, 0.7);
}

.GF::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 45px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  content: "光伏";
  color: #ffffff;
  font-weight: 900;
  font-size: 12px;
}

.TRQ {
  // background: #0050E2;
  // background:rgba(0, 80, 226, 0.1);
  border-top: 1px solid rgba(0, 80, 266, 0.7);
  border-left: 1px solid rgba(0, 80, 266, 0.7);
}

.TRQ::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  // line-height: -90px;
  width: 0px;
  height: 0px;
  border-width: 30px;
  border-style: solid;
  border-color: rgba(0, 80, 266, 0.7) transparent transparent
    rgba(0, 80, 266, 0.7);
}

.TRQ::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 45px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  content: "天然气";
  color: #ffffff;
  font-weight: 900;
  font-size: 12px;
}

.CN {
  // background: #44D428;
  // background:rgba(68, 212, 40, 0.1);
  border-top: 1px solid rgba(255, 82, 39, 0.7);
  border-left: 1px solid rgba(255, 82, 39, 0.7);
}

.CN::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  // line-height: -90px;
  width: 0px;
  height: 0px;
  border-width: 30px;
  border-style: solid;
  border-color: rgba(255, 82, 39, 0.7) transparent transparent
    rgba(255, 82, 39, 0.7);
}

.CN::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 45px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  content: "储能";
  color: #ffffff;
  font-weight: 900;
  font-size: 12px;
}
</style>